<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="container">
			<h2 class="page-header">点击切换颜色</h2>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</body>
</html>
<script type="text/javascript">
	let items = document.getElementsByClassName("item");
	// 遍历并且绑定事件
	for(let i = 0;i<items.length;i++){
		items[i].onclick = function(){
			// 修改当前元素背景颜色
			// 使用var会先完成循环在执行回调函数，此时i为3
			items[i].style.background = 'pink'
		}
	}
</script>
<style type="text/css">
	.item{
		width: 100px;
		height: 50px;
		border: 1px solid;
		margin-right: 20px;
		float: left;
	}
</style>